<style lang="scss" src="./index.scss" scoped></style>
<template>
    <div class="drag-tag-list-box" v-loading="ajaxLoader">
        <div class="drag-tag-list-ul">
            <el-collapse v-model="activeName">
                <template v-for="(item, index) in selectTagList">
                    <el-collapse-item :name="index" class="drag-tag-list-li" :key="index">
                        <template slot="title" v-if="item.topCategoryName">
                            <div class="drag-tag-list__menu">
                                {{ item.topCategoryName }}
                            </div>
                        </template>
                        <drag-list
                            :isSelect="true"
                            :list="item.list"
                            @item-click="handleItemClick"
                        ></drag-list>
                    </el-collapse-item>
                </template>
            </el-collapse>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import DragList from "./list.vue";

// const mock = ["input", "select", "date", "location", "img"];
@Component({
    components: {
        DragList
    }
})
export default class DragTagList extends Vue {
    type = "tag";
    search = "";
    activeName = [0];
    ajaxLoader = false;
    ajaxIndex = 0;
    list: any[] = [];
    selectTagList = [{
        list: [{
            dropDownBoxName: "性别",
            boxFlag: 6,
            list: ["男", "女"]
        }, {
            dropDownBoxName: "学历",
            boxFlag: 6,
            list: ["文盲", "小学", "初中", "高中", "中专", "大专", "本科", "研究生", "博士", "教授"]
        }, {
            dropDownBoxName: "政治面貌",
            boxFlag: 6,
            list: ["党员", "团员", "民主党派", "群众"]
        }, {
            dropDownBoxName: "有/无",
            boxFlag: 6,
            list: ["有", "无"]
        }, {
            dropDownBoxName: "是/否",
            boxFlag: 6,
            list: ["是", "否"]
        }, {
            dropDownBoxName: "婚姻",
            boxFlag: 6,
            list: ["已婚", "未婚", "离异"]
        }]
    }]

    mounted() {
        this.initData();
    }

    loader(state: boolean) {
        if (state) {
            if (this.ajaxIndex === 0) this.ajaxLoader = true;
            this.ajaxIndex++;
        } else {
            setTimeout(() => {
                this.ajaxIndex--;
                if (this.ajaxIndex === 0) this.ajaxLoader = false;
            }, 300);
        }
    }

    handleInputChange() {
        this.initData();
    }

    async initData() {
        // this.loader(true);
        // const res = await this.$server["moduleManage/form/dimension"]({
        //     loader: false
        // });
        // if (res.data.code === 200) {
        //     this.loader(false);
        //     this.selectTagList = this.selectTagList.concat([], res.data.data);
        //     this.activeName = this.selectTagList.map((item: any, index: any) => index);
        // } else {
        //     this.loader(false);
        //     this.$message.error(res.data.message || "接口请求错误!");
        // }
        this.activeName = this.selectTagList.map((item: any, index: any) => index);
    }

    buildTableData(list: any) {
        const res: any = [];
        Object.keys(list).forEach((key: any, index: any) => {
            const _cur: any = {};
            _cur.name = key;
            _cur.id = index;
            _cur.children = (list[key] || []).map((cur: any) => {
                return {
                    id: cur.id,
                    name: cur.name || "",
                    source: cur
                };
            });
            if (_cur.children && _cur.children.length > 0) {
                res.push(_cur);
            }
        });
        return res;
    }

    handleClick() {
        this.initData();
    }

    handleItemClick(item: any, type: string) {
        this.$emit("item-click", item, type, 1);
    }
}
</script>
